<template>
    <div>
        <SuperTable ref="table" path="/order/ticketing/index" :params="params" :columns="columns">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.partner_osn" clearable placeholder="商家订单号" style="width: 200px;" />
                    </FormItem>
                    <FormItem label="状态" prop="status">
                        <Select v-model="filter.status" clearable style="width: 80px">
                            <Option :value="-1">已驳回</Option>
                            <Option :value="0">待审核</Option>
                            <Option :value="1">已审核</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>

        <Modal title="电子票审核" v-model="showModal" :width="600" @on-cancel="handleCancel">
            <div class="order-card">
                <div class="title">备票信息</div>
                <div class="content">
                    <div class="cell">
                        <div class="label">商家：</div>
                        <div class="value">{{ curInfo.partner.name }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">履约方式：</div>
                        <div class="value">{{ curInfo.method_text }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">类型：</div>
                        <div class="value">{{ curInfo.type_text }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">出票平台：</div>
                        <div class="value">{{ curInfo.platform_name }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.method == 1 || curInfo.method == 2">
                        <div class="label">出票时间：</div>
                        <div class="value">{{ curInfo.time }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">入场引导：</div>
                        <div class="value">{{ curInfo.entry_desc }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.type == 32">
                        <div class="label">账号密码：</div>
                        <div class="value">{{ curInfo.account_info }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.type == 41">
                        <div class="label">入场联系方式：</div>
                        <div class="value">{{ curInfo.entry_contact }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.type == 42">
                        <div class="label">动态码链接：</div>
                        <div class="value">{{ curInfo.trends_url }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.method == 5">
                        <div class="label">绑定截止时间：</div>
                        <div class="value">{{ curInfo.gift_end_time }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.type == 51">
                        <div class="label">兑换码：</div>
                        <div class="value">{{ curInfo.gift_code }}</div>
                    </div>
                    <div class="cell" v-if="curInfo.method == 1 || curInfo.method == 2 || curInfo.type == 31 || curInfo.type == 52">
                        <div class="label">截图：</div>
                        <div class="value">
                            <ImageView :imgs="curInfo.imgs"></ImageView>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-card">
                <div class="title">观演人</div>
                <div class="content" style="marginLeft:40px">
                    <div v-for="item in curInfo.order_info.contact_info" :key="item.id">
                        <Tag color="blue">{{ item.name }} <span style="margin: 0 10px">{{ item.type === 1 ? '身份证' : '其他' }}</span> {{ item.number }}</Tag>
                    </div>
                </div>
            </div>
            <Form ref="form" :model="form" :rules="rules" :label-width="80">
                <FormItem label="状态" prop="status" required>
                    <RadioGroup v-model="form.status">
                        <Radio :disabled="curInfo.status != 0" :label="1">通过</Radio>
                        <Radio :disabled="curInfo.status != 0" :label="-1">驳回</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button :disabled="curInfo.status != 0" type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
import ImageView from '@/components/form/image-view.vue';
export default {
    components: {
        SuperTable,
        TableRows,
        ImageView
    },
    data() {
        return {
            submiting: false,
            showModal: false,
            form: {
                partner_osn: '',
                status: 1,
            },
            rules: {},
            curInfo: {
                partner: {},
                order_info: {
                    contact_info: [],
                }
            },
            filter: {
                partner_osn: '',
                status: ''
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '订单信息',
                    minWidth: 120,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`订单号：${params.row.order_sn}`),
                            h('p',`商家单号：${params.row.partner_osn || '-'}`)
                        ])
                    }
                },
                {
                    title: '票档信息',
                    minWidth: 150,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.order_info.project_name}`),
                            h('p',[
                                h('span',`${params.row.order_info.concert_name + '  ' + params.row.order_info.sku_name}` + '  '),
                                h('span', {style:{color:'red'}}, `${params.row.order_info.number}张`)
                            ]),
                        ])
                    }
                },
                {
                    title: '商家&出票平台',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`商家：${params.row.partner.name}`),
                            h('p',`出票平台：${params.row.platform_name}`),
                        ])
                    }
                },
                {
                    title: '履约渠道&类型',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`履约渠道：${params.row.method_text}`),
                            h('p',`类型：${params.row.type_text}`),
                        ])
                    }
                },
                {
                    title: '创建时间&状态',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`${params.row.created_at}`),
                            h('p',`${params.row.status_text}`),
                        ])
                    }
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "primary",
                                    size: "small",
                                    disabled: params.row.status != 0
                                },
                                on: {
                                    click: () => {
                                        this.curInfo = params.row;
                                        this.form.partner_osn = params.row.partner_osn;
                                        this.showModal = true;
                                    }
                                }
                            }, params.row.status == 0 ? "审核" : "查看")
                        ])
                    }
                }
            ]
        }
    },
    mounted() {
        if ('status' in this.$route.query) {
            this.filter.status = this.$route.query.status;
            this.params.status = this.$route.query.status;
            this.$refs.table.init();
        }
    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.partner_osn = filter.partner_osn;
            this.params.status = filter.status;
            this.$refs.table.init();
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        partner_osn: form.partner_osn,
                        status: form.status,
                    }
                    this.submiting = true;
                    this.$ajax.post('/order/ticketing/audit', params).then(res => {
                        this.$Message.success('操作成功');
                        this.submiting = false;
                        this.handleCancel();
                        this.$refs.table.init();
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            })
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.partner_osn = '';
                this.form.status = 1;
            }, 300)
        },
    }
}
</script>

<style lang="less" scoped>
.order-card {
    margin-bottom: 20px;
    .title {
        font-size: 14px;
        font-weight: bold;
    }
    .content {
        margin-top: 10px;
        .cell {
            padding: 6px 0;
            line-height: 20px;
            font-size: 14px;
            overflow: hidden;
            .label {
                float: left;
                width: 100px;
                text-align: right;
                color: #666;
            }
        }
    }
}
</style>